<template>
  <div class="NotFind404">
    <div class="ctx-wrap">
      <div class="left">
        <div class="txt404 mb8">404</div>
        <div class="txtSry mb29">sorry,页面出错了~</div>
        <div class="flex2part">
          <router-link to="/">
            <button class="btn btn-style-tan mr20">返回首页</button>
          </router-link>
          <button class="btn btn-style-tan" @click="$router.go(-1)">返回上一页</button>
        </div>
      </div>
      <img class="right" src="../assets/imgs/public/logo404.png" alt="logo404">
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {}
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
  .NotFind404 {
  }

  .ctx-wrap {
    position: fixed;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    .txt404 {
      height: 98px;
      font-family: Impact;
      font-size: 98px;
      color: #bbb;
    }
    .txtSry {
      font-size: 20px;
      color: #666;
    }
    .btn {
      width: 105px;
      height: 33px;
      border-radius: 5px;
      border: none;
      line-height: 33px;
      text-align: center;
      color: #fff;
    }
  }

  .right {
    width: 160px;
    height: 183px;
  }
</style>
